<template>
  <div class="practice-container">
    <!-- 搜索框 -->
    <div class="search" v-show="isShowSearch">
      <span>题库名称 </span>
      <el-input v-model="bankName" placeholder="请输入题库名称" />
      <el-button :icon="Search" class="el-button__primary" type="primary" @click="initBankList">查询</el-button>
      <el-button :icon="Refresh" class="el-button__default" @click="refreshData">重置</el-button>
    </div>


    <!-- 题库信息卡片 -->
    <div class="bank-info__card">
      <el-row :gutter="30" v-loading="loading">
        <el-col :lg="8" :md="12" :xs="24" v-for="item in bankList" :key="item.id">
          <el-card class="bank-info__card__item" :class="{ isFail: item.id===0 }">
            <!-- 基本信息 -->
            <div class="bank-info__card__item_base">
              <div class="bank-info__card__item_base__item">
                <span>题库名称：</span>
                <span>{{ item.bankName }}</span>
              </div>
            </div>

            <!-- 其他信息 -->
            <div class="bank-info__card__item__other">
              <div class="bank-info__card__item__other__item">
                <span>共享状态： </span>
                <span>{{ bankType[item.publicScope] ? bankType[item.publicScope].label : '未知' }}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>题目数量： </span>
                <span>{{ item.questionNum || 0 }}</span>
              </div>
              <div class="bank-info__card__item__other__item">
                <span>创建时间： </span>
                <span>{{ item.createTime || '1970-01-01 00:00:00' }}</span>
              </div>
              <!-- 操作 -->
              <div class="bank-info__card__item__operator">
                <el-button link type="primary" @click="startPractice(item.id,item.bankName)" :disabled="item.questionNum===0">
                  <template #default>
                    <el-icon><DocumentChecked /></el-icon>
                    开始练习
                  </template>
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 分页按钮 -->
    <div class="pagination">
      <div class="pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[6, 10, 20, 30, 40, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
        />
      </div>
    </div>

    <practice-question @refresh="refreshData" />
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import { Search, Refresh,DocumentChecked, } from '@element-plus/icons-vue';
import {getPracticeBank} from "@/api/question/bank.js";
import {practiceStore} from "@/stores/practice/practice.js";
import PracticeQuestion from "@/components/practice/practiceQuestion.vue";

// 数据模型
const isShowSearch = ref(true);
const bankName = ref('');
const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const store=practiceStore()
// 题库列表数据
const bankList = ref([]);
// 题库类型选项
const bankType = {
  0: { label: '未共享' },
  1: { label: '本校共享' },
  2: { label: '完全共享' }
};

onMounted(()=>{
  initBankList()
})
// 方法
const initBankList = async () => {
  // 初始化题库列表
  loading.value = true;
  const data={page:currentPage.value,pageSize:pageSize.value,bankName:bankName.value}
  const res = await getPracticeBank(data)
  bankList.value=res.data.records
  total.value=res.data.total
  loading.value = false;
};

const refreshData = () => {
  // 刷新数据
  bankName.value = '';
  initBankList();
};

const showSearch = () => {
  isShowSearch.value = !isShowSearch.value;
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  initBankList();
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  initBankList();
};

const startPractice = (id,bank) => {
  store.setBankId(id)
  store.setPracticeOpen(true)
  store.setBankName(bank)
};
</script>

<style scoped>
.practice-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid var(--el-menu-border-color);
}

.search {
  margin-bottom: 20px;
  span {
    line-height: 32px;
  }
  display: flex;
  font-size: 12px;

  .el-input,
  .el-select {
    width: 160px;
    height: 32px;
    font-size: 12px;
    margin: 0 8px;
  }
}


.bank-info__card {
  min-height: 70%;
  display: flex;
  overflow: auto;
  margin: 0 60px;

  .el-row {
    width: 100% !important;
    height: 100% !important;
  }

  .bank-info__card__item {
    border-radius: 10px;
    border: rgb(46, 92, 246) 1px solid;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    box-shadow: 1px 1px 10px 1px rgba(46, 92, 246, 0.2);
  }
}

.pagination {
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: right;

  .pagination-block {
    margin-right: 20px;
  }
}

.bank-info__card__item_base {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: bold;
  color: rgb(46, 92, 246);

  .bank-info__card__item_base__item {
    display: flex;
    align-content: center;
  }
}

.bank-info__card__item__other {
  font-size: 12px;

  .bank-info__card__item__other__item {
    margin: 5px 0;
  }
}

.bank-info__card__item__operator {
  font-size: 12px;
  display: flex;
  justify-content: right;

  .el-button {
    color: rgb(46, 92, 246);
    font-size: 12px;
  }
}

.el-col {
  margin-top: 20px;
  max-height: 220px;
}
.isFail{
  border: rgb(250, 75, 36) 1px solid !important;
}
</style>